<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html class=" ext-strict x-viewport">
  <head>
  <base href="<%=basePath%>">
<title>JSON Viewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="assets/js/jsonViewter/css/ext-all.css">
<script type="text/javascript" src="assets/js/jsonViewter/ext-base.js"></script>
<script type="text/javascript" src="assets/js/jsonViewter/ext-all.js"></script>
<script src="<%=basePath%>/assets/js/jquery-2.0.3.min.js"></script>
<style type="text/css" id="styleSheetIconCls">
</style>
<style type="text/css">
.br0 {
	COLOR: #009900
}

.st0 {
	COLOR: #3366cc
}

.sy0 {
	COLOR: #339933
}
</style>
<script type="text/javascript">
window.onload = function() {
	var oTxt = document.getElementById("edit");
	oTxt.onkeydown = function(ev) {
		var oEvent = ev || event;
		if (oEvent.keyCode == 9) {
			if (oEvent.preventDefault) {
				oEvent.preventDefault();
			} else {
				window.event.returnValue = false;
			}
			oTxt.value += "    ";
		}

	}
	//设置初始值
	var initJsonStr;
	try{
		initJsonStr=${initJsonStr[0]};
	}catch(e){}
	if(initJsonStr){
		oTxt.value=formatJson(initJsonStr);
	}
}
function formatJson(json, options) {
	var reg = null,
		formatted = '',
		pad = 0,
		PADDING = '    '; 
	options = options || {};
	options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
	options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
	if (typeof json !== 'string') {
		json = JSON.stringify(json);
	} else {
		json = JSON.parse(json);
		json = JSON.stringify(json);
	}
	reg = /([\{\}])/g;
	json = json.replace(reg, '\r\n$1\r\n');
	reg = /([\[\]])/g;
	json = json.replace(reg, '\r\n$1\r\n');
	reg = /(\,)/g;
	json = json.replace(reg, '$1\r\n');
	reg = /(\r\n\r\n)/g;
	json = json.replace(reg, '\r\n');
	reg = /\r\n\,/g;
	json = json.replace(reg, ',');
	if (!options.newlineAfterColonIfBeforeBraceOrBracket) {			
		reg = /\:\r\n\{/g;
		json = json.replace(reg, ':{');
		reg = /\:\r\n\[/g;
		json = json.replace(reg, ':[');
	}
	if (options.spaceAfterColon) {			
		reg = /\:/g;
		json = json.replace(reg, ': ');
	}
	var jsons=json.split('\r\n');
	var length=jsons.length;
	for(var index=0;index<length;index++){
		var node=jsons[index];
		var i = 0,
			indent = 0,
			padding = '';
 
		if (node.match(/\{$/) || node.match(/\[$/)) {
			indent = 1;
		} else if (node.match(/\}/) || node.match(/\]/)) {
			if (pad !== 0) {
				pad -= 1;
			}
		} else {
			indent = 0;
		}
		for (i = 0; i < pad; i++) {
			padding += PADDING;
		}
		formatted += padding + node + '\r\n';
		pad += indent;
	}
	return formatted;
}
var treeViewRootNodeText="${treeViewRootNodeText[0]}";
if(!treeViewRootNodeText){
	treeViewRootNodeText="JSON";
}

$(function(){
	$(document).on("dblclick",".x-grid3-col-value",function(){
		var that=$(this);
		var oldValue=that.text();
		var input=that.find("input");
		if(input.size()>0){
			oldValue=input.val();
		}
		var input="<input type='text' oldValue='"+oldValue+"' style='border:none;margin:0px; padding:0px;' value='"+oldValue+"'>";
		that.html(input).find("input").focus().select();
		return false;
	});
	$(document).on("blur",".x-grid3-col-value input",function(){
		var that=$(this);
		var oldValue=that.attr("oldValue");
		var newValue=that.val();
		that.parent().html(newValue);
		if(oldValue!=newValue){
			
		}
		var nowSelectNode=(function(){
			var isParentNode=false;	
			var node=$(".x-tree-selected");
			var nodeText;
			do{
				nodeText=node.find("a:first span").text();
				isParentNode =nodeText.indexOf(":")>-1;
				if(isParentNode){
					node=node.parent().prev();
					nodeText=node.find("a:first span").text();
					if("customAttr"==nodeText){
						node=node.parent().parent().parent().find("div:first");
					}
				}else{
					if("customAttr"==nodeText){
						node=node.parent().parent().parent().find("div:first");
					}
				}
			}while(isParentNode);
			return node;
		})();
		console.log(nowSelectNode.find("a:first span").text());
	});
});
</script>
<script type="text/javascript" src="assets/js/jsonViewter/jsonviewercn.js"></script>
<div id="ext-comp-1004" class="x-tab-panel" style="width: 1240px;margin-top:80px ">
	<div class="x-tab-panel-header x-unselectable" id="ext-gen21" style="-webkit-user-select: none; width: 1238px; ">
		<div class="x-tab-strip-wrap" id="ext-gen25">
			<ul class="x-tab-strip x-tab-strip-top" id="ext-gen27">
				<li class="" id="ext-comp-1004__viewerPanel">
				<a class="x-tab-strip-close" onclick="return false;"></a>
				<a class="x-tab-right" href="#" onclick="return false;">
					<em class="x-tab-left">
						<span class="x-tab-strip-inner">
							<span class="x-tab-strip-text">Viewer</span>
						</span>
					</em>
				</a>
				</li>
				<li class=" x-tab-strip-active" id="ext-comp-1004__textPanel">
					<a class="x-tab-strip-close" onclick="return false;"></a>
					<a class="x-tab-right" href="#" onclick="return false;">
						<em class="x-tab-left">
							<span class="x-tab-strip-inner">
								<span class="x-tab-strip-text">Json Text</span>
							</span>
						</em>
					</a>
				</li>
				<li class="x-tab-edge" id="ext-gen28"></li>
				<div class="x-clear" id="ext-gen29"></div>
			</ul>
		</div>
		<div class="x-tab-strip-spacer" id="ext-gen26"></div>
	</div>
</div>
<div id="ext-comp-1001" class="x-tip" style="position: absolute; z-index: 20000; visibility: hidden; display: none; ">
	<div class="x-tip-tl">
		<div class="x-tip-tr">
			<div class="x-tip-tc">
				<div class="x-tip-header x-unselectable" id="ext-gen10"
					style="-webkit-user-select: none; ">
					<span class="x-tip-header-text"></span>
				</div>
			</div>
		</div>
	</div>
	<div class="x-tip-bwrap" id="ext-gen11">
		<div class="x-tip-ml">
			<div class="x-tip-mr">
				<div class="x-tip-mc">
					<div class="x-tip-body" id="ext-gen12" style="height: auto; "></div>
				</div>
			</div>
		</div>
		<div class="x-tip-bl x-panel-nofooter">
			<div class="x-tip-br">
				<div class="x-tip-bc"></div>
			</div>
		</div>
	</div>
</div>
</body>
</html>